<template>
	
	<fui-tabs :tabs="tabs" @change="changeTab" :short="false" selectedColor="#333" sliderBackground="#333" />
	<view v-if="currentTab === '待接收'">
		<view class="container" v-for="(food,index) in foodOrder">
			<view class="order-box">
				<view class="header">
					<view class="store-name">订单编号：{{food.orderId}}</view>
					<view class="status">{{orderType}}</view>
				</view>
				<view class="item" v-for="(items,itemsIndex) in food.cao" @click="godetailsOrder(food,items)">
					<image class="item-image" :src="items.comboImg"></image>
					<view class="item-details">
						<view class="item-title">{{items.comboName}}</view>
						<view class="item-options-quantity">
							<view class="item-options">{{items.comboContain}}</view>
							<view class="item-quantity">x{{nums[index][itemsIndex]}}</view>
						</view>
					</view>
				</view>

				<view class="footer">
					<view class="timestamp">{{food.createTime}}</view>
					<view class="total">共{{totalNums[index]}}件商品 合计: ¥{{food.money}}</view>
				</view>
				<view class="button-container">
					<button class="reorder-button">待接收</button>
				</view>
			</view>
		</view>

	</view>
	<view v-else-if="currentTab === '已送达'">
		<view style="margin-top: 20px;" v-if="message === '您还没有已接受的订单'">
			<fui-empty src="https://zjdemo.xuande.work:8889/photo/65cfff1d2fbe4ceeac42524d021f21ff.png" title="暂无订单记录">
				<fui-button text="返回首页" :size="28" width="336rpx" height="84rpx" radius="100rpx" background="#fff"
					:margin="['64rpx','0']" borderColor="#333" color="#333" @click="goIndex"></fui-button>
			</fui-empty>
		</view>
		<view v-else>
		<view class="container" v-for="(food,index) in foodOrderss">
			<view class="order-box">
				<view class="header">
					<view class="store-name">订单编号：{{food.orderId}}</view>
					<view class="status">{{orderType}}</view>
				</view>
				<view class="item" v-for="(items,itemsIndex) in food.cao" >
					<image class="item-image" :src="items.comboImg"></image>
					<view class="item-details">
						<view class="item-title">{{items.comboName}}</view>
						<view class="item-options-quantity">
							<view class="item-options">{{items.comboContain}}</view>
							<view class="item-quantity">x{{numsss[index][itemsIndex]}}</view>
						</view>
					</view>
				</view>
		
				<view class="footer">
					<view class="timestamp">{{food.createTime}}</view>
					<view class="total">共{{totalNumsss[index]}}件商品 合计: ¥{{food.money}}</view>
				</view>
				<view class="button-container">
					<button class="reorder-button" >已送达</button>
						
				</view>
			</view>
		</view>
		</view>
	</view>

	<view v-else-if="currentTab === '全部订单'">
		<view style="margin-top: 20px;" v-if="message === '您还没有已接受的订单'">
			<fui-empty src="https://zjdemo.xuande.work:8889/photo/65cfff1d2fbe4ceeac42524d021f21ff.png" title="暂无订单记录">
				<fui-button text="返回首页" :size="28" width="336rpx" height="84rpx" radius="100rpx" background="#fff"
					:margin="['64rpx','0']" borderColor="#333" color="#333" @click="goIndex"></fui-button>
			</fui-empty>
		</view>
		<view v-else>
			<view class="container" v-for="(food,index) in foodOrders">
				<view class="order-box">
					<view class="header">
						<view class="store-name">订单编号：{{food.orderId}}</view>
						<view class="status">{{orderType}}</view>
					</view>
					<view class="item" v-for="(items,itemsIndex) in food.cao" @click="godetailsOrders(food,items)">
						<image class="item-image" :src="items.comboImg"></image>
						<view class="item-details">
							<view class="item-title">{{items.comboName}}</view>
							<view class="item-options-quantity">
								<view class="item-options">{{items.comboContain}}</view>
								<view class="item-quantity">x{{numss[index][itemsIndex]}}</view>
							</view>
						</view>
					</view>

					<view class="footer">
						<view class="timestamp">{{food.createTime}}</view>
						<view class="total">共{{totalNumss[index]}}件商品 合计: ¥{{food.money}}</view>
					</view>
					<view class="button-container">
						<button class="reorder-button">待接单</button>
					
					</view>
				</view>
			</view>
		</view>
	</view>


	<view v-else-if="currentTab === '已接收'">
		<view style="margin-top: 20px;" v-if="message === '您还没有已接受的订单'">
			<fui-empty src="https://zjdemo.xuande.work:8889/photo/65cfff1d2fbe4ceeac42524d021f21ff.png" title="暂无订单记录">
				<fui-button text="返回首页" :size="28" width="336rpx" height="84rpx" radius="100rpx" background="#fff"
					:margin="['64rpx','0']" borderColor="#333" color="#333" @click="goIndex"></fui-button>
			</fui-empty>
		</view>
		<view v-else>
			<view class="container" v-for="(food,index) in foodOrders">
				<view class="order-box">
					<view class="header">
						<view class="store-name">订单编号：{{food.orderId}}</view>
						<view class="status">{{orderType}}</view>
					</view>
					<view class="item" v-for="(items,itemsIndex) in food.cao" @click="godetailsOrders(food,items)">
						<image class="item-image" :src="items.comboImg"></image>
						<view class="item-details">
							<view class="item-title">{{items.comboName}}</view>
							<view class="item-options-quantity">
								<view class="item-options">{{items.comboContain}}</view>
								<view class="item-quantity">x{{numss[index][itemsIndex]}}</view>
							</view>
						</view>
					</view>

					<view class="footer">
						<view class="timestamp">{{food.createTime}}</view>
						<view class="total">共{{totalNumss[index]}}件商品 合计: ¥{{food.money}}</view>
					</view>
					<view class="button-container">
						<button class="reorder-button">已接受</button>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view v-else-if="currentTab === '已退款'">
		<view style="margin-top: 20px;" v-if="message === '您还没有已退款的订单'">
			<fui-empty src="https://zjdemo.xuande.work:8889/photo/65cfff1d2fbe4ceeac42524d021f21ff.png" title="暂无订单记录">
				<fui-button text="返回首页" :size="28" width="336rpx" height="84rpx" radius="100rpx" background="#fff"
					:margin="['64rpx','0']" borderColor="#333" color="#333" @click="goIndex"></fui-button>
			</fui-empty>
		</view>
		<view v-else>
			<view class="container" v-for="(food,index) in foodOrders">
				<view class="order-box">
					<view class="header">
						<view class="store-name">订单编号：{{food.orderId}}</view>
						<view class="status">{{orderType}}</view>
					</view>
					<view class="item" v-for="(items,itemsIndex) in food.cao" @click="godetailsOrders(food,items)">
						<image class="item-image" :src="items.comboImg"></image>
						<view class="item-details">
							<view class="item-title">{{items.comboName}}</view>
							<view class="item-options-quantity">
								<view class="item-options">{{items.comboContain}}</view>
								<view class="item-quantity">x{{numss[index][itemsIndex]}}</view>
							</view>
						</view>
					</view>

					<view class="footer">
						<view class="timestamp">{{food.createTime}}</view>
						<view class="total">共{{totalNumss[index]}}件商品 合计: ¥{{food.money}}</view>
					</view>
					<view class="button-container">
						<button class="reorder-button">已退款</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	
	
	//todo 
	//全部订单、退款订单
	
	const tabs = ref(['全部订单', '待接收', '已接收', '已送达', '已退款']);
	const currentTab = ref('全部订单');


	import {
		url
	} from '@/utils/request.js';
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";

	const orderType = ref('订单')
	const nums = ref([]);
	const numss = ref([]);
	const numsss = ref([]);
	//todossss是退款订单
	const numssss = ref([]);
	const foodOrderss = ref([]);
	const foodOrder = ref([]);
	const foodOrders = ref([]);
	const foodOrdersss = ref([]);
	const totalNums = ref([]);
	const totalNumss = ref([]);
	const totalNumsss = ref([]);
	const totalNumssss = ref([]);
	const message = ref(null)
	const isGet = ref([])



	const fetchData = () => {
		uni.request({
			url: url + '/rider/riderSelectOrders',
			method: 'GET',
			success: (res) => {
				console.log(res.data.data)
				foodOrder.value = res.data.data;
				let allNums = [];
				let allTotalNums = [];

				res.data.data.forEach(order => {
					let numArray = order.num.split(',').map(Number);
					allNums.push(numArray);
					let total = numArray.reduce((a, b) => a + b, 0);
					allTotalNums.push(total);
				});
				nums.value = allNums;
				totalNums.value = allTotalNums;
			}
		});
		uni.request({
			url: url + '/rider/riderSelectAllWaitOrders',
			method: 'GET',
			success: (res) => {
			foodOrders.value = res.data.data;
			let allNumss = [];
			let allTotalNumss = [];
			
			res.data.data.forEach(order => {
				let numArrays = order.num.split(',').map(Number);
				allNumss.push(numArrays);
				let totals = numArrays.reduce((a, b) => a + b, 0);
				allTotalNumss.push(totals);
			});
			numss.value = allNumss;
			totalNumss.value = allTotalNumss;
			}
		});
		uni.request({
			url: url + '/rider/riderSelectAllGetOrders',
			method: 'GET',
			success: (res) => {
			foodOrderss.value = res.data.data;
			let allNumsss = [];
			let allTotalNumsss = [];
			
			res.data.data.forEach(order => {
				let numArrayss = order.num.split(',').map(Number);
				allNumsss.push(numArrayss);
				let totalss = numArrayss.reduce((a, b) => a + b, 0);
				allTotalNumsss.push(totalss);
			});
			numsss.value = allNumsss;
			totalNumsss.value = allTotalNumsss;
			}
		});
	}



	onLoad(() => {
		fetchData();
	});

	onPullDownRefresh(() => {
		console.log("下拉刷新");
		fetchData();
		setTimeout(() => {
			console.log('End pulldown refresh');
			uni.stopPullDownRefresh();
		}, 1000);
	});

	onReachBottom(() => {
		console.log("上拉加载更多");
		fetchData();
		setTimeout(() => {
			console.log('End reach bottom refresh');
		}, 1000);
	});

	const changeTab = (tab) => {
		currentTab.value = tabs.value[tab.index];
	};
</script>

<style>
	.container {
		padding: 10px;
	}

	.order-box {
		border: 1px solid #ddd;
		border-radius: 10px;
		padding: 10px;
		background-color: #fff;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.status {
		color: #333;
		font-size: 14px;
	}

	.store-name {
		font-size: 14px;
		word-spacing: 10px;
	}

	.item {
		display: flex;
		border-bottom: 1px solid #f5f5f5;
		padding-bottom: 16px;
		margin-bottom: 16px;
	}

	.item-image {
		width: 36px;
		height: 36px;
		margin-right: 16px;
		align-self: center;
	}

	.item-details {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.item-title {
		font-size: 16px;
		/* font-weight: bold; */
	}

	.item-options-quantity {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		color: #666;
		margin-bottom: 8px;
	}

	.item-quantity {
		color: #999;
	}

	.footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
	}

	.timestamp {
		font-size: 14px;
		color: #666;
	}

	.total {
		font-size: 16px;
		font-weight: bold;
	}

	.button-container {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
	}

	.reorder-button {
		background-color: #333;
		color: #fff;
		border: none;
		padding: 5px 20px;
		margin-right: 0px;
		border-radius: 26px;
		font-size: 14px;
	}
</style>